<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>修改用户头像</title>
  <style>
    /* 这里可以添加一些样式，比如设置头像容器的样式 */
    .avatar-container {
      width: 100px;
      height: 100px;
      border: 1px solid #ccc;
      margin: 20px auto;
    }
    /* 修改按钮样式 */
    button {
      background-color: orange;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      /* 水平居中 */
      margin: 0 auto;
      display: block;
    }
  </style>
</head>

<body>
<!-- 头像展示容器 -->
<div class="avatar-container">
  <!-- 这里可以放置默认头像或者当前用户头像 -->
  <img src="default-avatar.jpg" alt="用户头像" id="avatar-img">
</div>
<!-- 修改头像按钮 -->
<button onclick="openFileChooser()">修改头像</button>
<script src="./js/common.js"></script>
<script>
  // 打开文件选择器的函数
  function openFileChooser() {
    // 创建一个文件输入元素
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    // 监听文件选择事件
    fileInput.addEventListener('change', handleFileSelect);
    // 模拟点击文件输入元素，打开文件选择对话框
    fileInput.click();
  }

  // 处理选择文件后的操作
  function handleFileSelect(event) {
    const file = event.target.files[0];
    // 仅处理图片文件
    if (file.type.startsWith('image/')) {
      // 创建一个 FileReader 对象，用于读取文件内容
      const reader = new FileReader();
      reader.onload = function (e) {
        // 将读取到的图片数据设置为头像图片的 src 属性
        document.getElementById('avatar-img').src = e.target.result;
        // 这里可以添加将图片上传到服务器的逻辑，比如使用 Ajax 请求
        // 假设你有一个名为 uploadAvatar 的函数来处理上传
        uploadAvatar(file);
      };
      // 以 Data URL 的形式读取文件
      reader.readAsDataURL(file);
    } else {
      alert('请选择图片文件！');
    }
  }

  // 模拟上传头像到服务器的函数
  function uploadAvatar(file) {
    // 这里可以使用 Ajax 请求将文件上传到服务器
    // 示例代码：
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload-avatar', true);
    xhr.send(file);
    xhr.onload = function () {
      if (xhr.status === 200) {
        alert('头像上传成功！');
      } else {
        alert('头像上传失败！');
      }
    };
  }
</script>
</body>

</html>